<template>
    <ul class="new-comment-ul">
      <li class="new-comment-li" v-for="item in comments" :key="item.id">
        <div class="comment-wrapper"
             :data-id="item.id"
             :data-top-level-id="item.id"
             @mouseenter="mouseStart(0, $event)"
             @mouseleave="mouseEnd(0, $event)">
          <img class="avatar" v-lazy="item.avatar"/>
          <div class="new-comment-wrapper">
            <div>
              <span :style="background">{{item.nickName}}</span>
              {{item.createTime}}
            </div>
            <p>
              {{item.content}}
              <span class="reply-author"
                    v-if="item.id == selectId"
                    :style="[item.id == selectId ? background : '']"
                    @click="showEditor(item)">
                    回复
              </span>
            </p>
          </div>
        </div>
        <ul class="children" v-if="item.children.records.length">
          <li class="children-li"
              v-for="reply in item.children.records"
              :key="reply.id"
              :data-id="reply.id"
              :data-top-level-id="item.id"
              @mouseenter="mouseStart(0, $event)"
              @mouseleave="mouseEnd(0, $event)">
            <div class="comment-wrapper">
              <img class="avatar" v-lazy="reply.avatar"/>
              <div class="new-comment-wrapper">
                <div>
                  <span :style="background">{{reply.nickName}}</span>
                  {{reply.createTime}}
                </div>
                <p>
                  <span class="reply">回复@{{reply.upperLevelNickName}}：</span>
                  {{reply.content}}
                  <span class="reply-author"
                        :style="[reply.id == selectId ? background : '']"
                        v-if="reply.id == selectId"
                        @click="showEditor(item, reply)">
                        回复
                  </span>
                </p>
              </div>
            </div>
          </li>
          <li v-if="item.children.current < item.children.pages" class="see-more">
            <span @click="seeMore(item)"
              @mouseenter="mouseStart(1, $event)"
              @mouseleave="mouseEnd(1, $event)">
              点我查看更多哦~
            </span>
          </li>
        </ul>
        <transition name="fade">
          <div class="reply-editor" v-if="clickId === item.id">
            <editor :reply="showCancelReply" :content="inputComment" @change="cancel" @submit="submit" />
          </div>
        </transition>
      </li>
    </ul>
</template>

<script>
import Editor from '../../components/Editor'
import { mapGetters } from 'vuex'

export default {
  name: 'Comment',
  props: {
    comments: Array
  },
  data () {
    return {
      reply: false,
      selectId: 0,
      clickId: 0,
      topLevelId: 0,
      editor: true,
      showCancelReply: false,
      inputComment: '',
      replyName: '',
      background: {
        'color': ''
      },
      temp: {
        nickName: '',
        email: '',
        link: '',
        content: '',
        parentId: 0,
        topLevelId: 0
      }
    }
  },
  methods: {
    // 经过开始事件
    mouseStart (type, e) {
      if (type === 0) {
        this.selectId = parseInt(e.target.dataset.id)
        this.temp.topLevelId = parseInt(e.target.dataset.topLevelId)
      } else if (type === 1) {
        e.currentTarget.style.color = this.getBackground
      }
    },
    // 经过离开事件
    mouseEnd (type, e) {
      if (type === 0) {
        this.selectId = 0
      } else if (type === 1) {
        e.currentTarget.style.color = ''
      }
    },
    // 展示回复
    showEditor (item, reply) {
      if (reply) {
        this.replyName = '@' + reply.nickName + ' '
        this.inputComment = this.replyName
      } else {
        this.inputComment = ''
        this.replyName = ''
      }
      this.editor = false
      this.showCancelReply = true
      this.clickId = item.id
      this.temp.parentId = reply ? reply.id : item.id
      this.$emit('showEditor', false, true)
    },
    // 关闭回复
    cancel () {
      this.editor = true
      this.showCancelReply = false
      this.clickId = 0
      this.$emit('cancel', true, false)
    },
    // 提交评论
    submit (temp) {
      this.temp.nickName = temp.nickName
      this.temp.email = temp.email
      this.temp.link = temp.link
      this.temp.content = this.replyName ? temp.content.split(this.replyName)[1] : temp.content
      this.$emit('submit', this.temp)
    },
    // 查看更多
    seeMore (row) {
      if (row.children.current < row.children.pages) {
        row.children.current += 1
        this.$emit('seeMore', row.id, row.children.current)
      }
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  },
  mounted () {
    const color = this.getBackground
    this.background.color = color
  },
  components: {
    Editor
  }
}
</script>

<style scoped lang="stylus">
  .new-comment-ul
    .new-comment-li
      border-bottom #f2f2f2 1px solid
      margin 10px 0
      padding 12px 0
      .comment-wrapper
        display flex
        flex-flow row
        .avatar
          display: block
          width 40px
          height 40px
          box-shadow: 0 1px 0 rgba(0,0,0,0.3);
          -moz-border-radius: 6px;
          -webkit-border-radius: 50%;
          border-radius: 50%;
          -webkit-background-clip: padding-box;
        .new-comment-wrapper
          display flex
          flex-flow column
          margin: 0 10px 10px
          line-height 20px
          font-size 12px
          width 100% !important
          div
            color #666
            span
              display inline-block
              padding-right 4px
          .reply-author
            display inline-block
            margin-left 16px
            color #23BDBD
            cursor pointer
          .reply-author:hover
            color #FF6666
          .reply
            font-weight bold
      .children
        .children-li
          padding 12px 12px 6px 10px
          margin 10px 0 0 50px
          border-left 2px solid #eeeeee
        .see-more
          display flex
          justify-content center
          padding-top: 6px
          color #666
          span
            cursor: pointer
      .reply-editor
        margin 10px 10px 10px 60px
    .new-comment-li:last-child
      border-bottom none
</style>
